<template>
  <div class="layout-padding">
    <splitpanes>
      <pane class="ml10">
        <splitpanes>
          <pane size="30">

            <!-- 左边 -->
            <div class="layout-padding-auto layout-padding-view">
              <el-row>
                <div class="mb8" style="width: 100%">
                  <el-button @click="PropDialogRef.openDialog()" class="ml10" icon="folder-add" type="primary">
                    {{ $t('common.addBtn') }}
                  </el-button>
                </div>
              </el-row>
              <el-scrollbar>
                <query-tree ref="PropTreeRef" :query="state.queryList" @node-click="handleNodeClick"
                  :placeholder="$t('ProdProp.inputPropNameTip')">
                  <template #default="{ data }">
                    <span class="custom-tree-node">
                      <span class="label">{{ data.propName }}</span>
                      <span class="code">{{ $stateFormat(data.rule, biz_prod_prop_rule) }}</span>
                      <span class="do">
                        <el-button-group>
                          <el-button icon="el-icon-edit" size="small"
                            @click.stop="PropDialogRef.openDialog(data.propId)"></el-button>
                          <el-tooltip :content="data.propName" placement="top">
                            <span style="margin-left: 12px">
                              <el-button icon="el-icon-delete" size="small"
                                @click.stop="handleDelete([data.propId])"></el-button>
                            </span>
                          </el-tooltip>
                        </el-button-group>
                      </span>
                    </span>
                  </template>
                </query-tree>
              </el-scrollbar>
              <el-footer style="height: 40px; line-height: 40px">
                <el-button type="primary" size="small" icon="Download" style="width: 100%" @click="exportExcel">
                  {{ $t('common.exportBtn') }}
                </el-button>
              </el-footer>
            </div>
          </pane>

          <!-- 右边 -->
          <pane class="ml8">
            <PropDialog @refresh="handleRefreshTree" ref="PropDialogRef" />
            <PropValueDialogDialog ref="PropValueDialogRef"></PropValueDialogDialog>
          </pane>
        </splitpanes>
      </pane>
    </splitpanes>
  </div>
</template>

<script setup lang="ts" name="systemProdProp">
import { delObj, getList } from '/@/api/bizs/ProdProp';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';
import { downBlobFile } from '/@/utils/other';
import { useDict } from "/@/hooks/dict";

// 引入组件
const PropDialog = defineAsyncComponent(() => import('./form.vue'));
const PropValueDialogDialog = defineAsyncComponent(() => import('/@/views/bizs/ProdProp/PropValue/index.vue'));
const QueryTree = defineAsyncComponent(() => import('/@/components/QueryTree/index.vue'));

// 定义查询字典
const { biz_prod_prop_rule } = useDict('biz_prod_prop_rule')

const { t } = useI18n();
// 定义变量内容
const PropDialogRef = ref();
const PropTreeRef = ref();
const PropValueDialogRef = ref();
const state = reactive({
  queryForm: {},
  queryList: (name?: string) => {
    return getList({
      name: name,
    });
  },
});

// 导出EXCEL
const exportExcel = () => {
  downBlobFile('/bizs/prodProp/export', state.queryForm, 'ProdProp.xlsx');
};


// 点击树
const handleNodeClick = (data: any) => {
  PropValueDialogRef.value.open(data);
};

// 刷新树
const handleRefreshTree = async (data: any) => {
  await PropTreeRef.value.getdeptTree();
  // 选择当前编辑、新增的节点
  handleNodeClick(data);
};

// 删除操作
const handleDelete = async (ids: string[]) => {
  try {
    await useMessageBox().confirm(t('common.delConfirmText'));
  } catch {
    return;
  }

  try {
    await delObj(ids);
    useMessage().success(t('common.delSuccessText'));
    PropTreeRef.value.getdeptTree();
  } catch (err: any) {
    useMessage().error(err.msg);
  }
};
</script>

<style scoped>
.menu:deep(.el-tree-node__label) {
  display: flex;
  flex: 1;
  height: 100%;
}

.custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 24px;
  height: 100%;
}

.custom-tree-node .code {
  font-size: 12px;
  color: #999;
}

.custom-tree-node .do {
  display: none;
}

.custom-tree-node:hover .code {
  display: none;
}

.custom-tree-node:hover .do {
  display: inline-block;
}
</style>
